<template>
	<uni-popup ref="popup" type="bottom">
		<view class="title flex_sbc">
			<image class="icon-size"></image>
			<view class="z-font-32">上传参赛视频</view>
			<image :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/close.png'" class="icon-size" @click="popup.close()"></image>
		</view>
		<view style="width: 100vw; background: #ffffff; padding-top: 40rpx">
			<!-- <video v-if="videoUrl" class="upload-box" style="border: none;" :src="setting.oss_pub_domain + videoUrl" :poster="setting.oss_pub_domain + videoUrl + '?x-oss-process=video/snapshot,t_1000,ar_auto'"></video> -->
			<view v-if="videoUrl" class="upload-box" v-html="videoHtml"></view>
			<view v-else class="upload-box flex_cc" @click="selectMedia.open()">
				<view class="text-c">
					<image  :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/upload-icon.png'" class="icon-size"></image>
					<view class="z-font-28 uni-color-main">上传作品</view>
				</view>
			</view>
			<view v-if="videoUrl" class="reupload" @click="selectMedia.open()">重新上传</view>
			<bottom-box :buts="buts" @change="saveVideo" :fixed="false"></bottom-box>
		</view>
	</uni-popup>
	<selete-media ref="selectMedia" type="video" @done="selectDone"></selete-media>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { saveUserVideo } from '../../api/gold-medal-coach';

const popup = ref(''), { proxy: that } = getCurrentInstance();
function open() {
	videoUrl.value = ''
	popup.value.open();
}
defineExpose({ open });

const buts = [
		{
			label: '确定',
			bgColor: 'uni-color-main-bg'
		}
	],
	videoUrl = ref(''),
	emit = defineEmits(['done']);
function saveVideo() {
	if (!videoUrl.value) return that.tools('请先上传视频');
	saveUserVideo({ videoUrl: videoUrl.value }).then((res) => {
		if (res) {
			that.tools.alert('视频上传成功');
			popup.value.close();
			emit('done', videoUrl.value)
		} else that.tools('视频上传失败');
	});
}

const selectMedia = ref('');
function selectDone(e) {
	videoUrl.value = e;
	videoHtml.value = setVideoHtml(e)
}

const videoHtml = ref('')
function setVideoHtml(src) {
	return `<video controlslist="nodownload"	controls="controls"   src="${that.setting.oss_pub_domain + src}"   style="height:100%;width: 100%;background: #333"  poster="${`${that.setting.oss_pub_domain}${src}?x-oss-process=video/snapshot,t_1000,ar_auto`}" webkit-playsinline="" playsinline="" ></video>`
}
</script>
<script>
export default {
	name: 'Upload'
};
</script>

<style scoped>
.title {
	width: 100vw;
	height: 96rpx;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0px 0px;
	border-bottom: 2px solid #ebeef5;
	box-sizing: border-box;
	padding: 0 24rpx;
}

.upload-box {
	width: 670rpx;
	height: 380rpx;
	background: #f5faf9;
	border-radius: 16rpx;
	border: 2px dotted #008965;
	margin: 0 40rpx 32rpx;
	overflow: hidden;
}

.reupload {
	border: 1px solid #008965;
	width: 140rpx;
	color: #008965;
	border-radius: 20rpx;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
	margin: 0 auto 32rpx;
}
</style>
